<!-- vue3-report  使用教程 -->
<script lang="ts" setup>
import { Document, Edit, Upload, User } from "@element-plus/icons-vue"
import { ref, onMounted, onBeforeUnmount } from "vue"

const active = ref(0)
// 将 timer 的类型修改为 NodeJS.Timeout | null
let timer: NodeJS.Timeout | null = null

const next = () => {
  if (active.value++ > 3) {
    active.value = 0
  }
}

onMounted(() => {
  // 每 2000 毫秒（2秒）执行一次 next 函数
  timer = setInterval(next, 2000)
})

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>
<template>
  <div class="app-container">
    <el-card style="width: 100%" shadow="hover">
      <template #header>
        <div>
          <el-text size="large" type="primary">日报填报教程</el-text>
        </div>
      </template>

      <!-- <el-button class="my-2" @click="next">Next step</el-button> -->

      <el-steps style="height: 500px" :space="100" direction="vertical" :active="active" finish-status="success">
        <el-step title="1. 编辑经办人" :icon="Edit">
          <template #description> 点击右上角个人中心，编辑个人信息中的jira账号。即jira中的经办人 </template>
        </el-step>

        <el-step
          title="2. 导入jira"
          :icon="Upload"
          description="组员：可按需导入，组长：可按天导入；管理员：可按周导入"
        />

        <el-step title="3. 项目人员" :icon="User" description="项目经理勾选项目的人员" />

        <el-step title="4.填写日报" :icon="Document">
          <template #description>
            <p>
              <el-text class="mx-1" size="large" type="danger">选择项目后：根据项目类型，带出不同的jira列表：</el-text>
            </p>
            <p>
              <el-text class="mx-1" type="danger"
                >&nbsp;&nbsp;新需求项目:JIRA编号包含项目的JIRA前缀，JIRA经办人为当前用户，JIRA类型为非BUG的所有JIRA(已经关联项目的jira则需要和当前选择的项目匹配)</el-text
              >
            </p>
            <p>
              <el-text class="mx-1" type="danger"
                >&nbsp;&nbsp;运维类项目:JIRA编号包含项目的JIRA前缀，JIRA经办人为当前用户，JIRA类型为NOT in(New
                Feature、Improvement)(已经关联项目的jira则需要和当前选择的项目匹配)</el-text
              >
            </p>
            <p>
              <el-text class="mx-1" type="danger"
                >Bug
                jira:JIRA编号包含项目的JIRA前缀，JIRA经办人为当前用户，JIRA类型为BUG的所有JIRA(已经关联项目的jira则需要和当前选择的项目匹配)</el-text
              >
            </p>
            <p>鼠标悬浮于jira下拉选项的时候展示其内容</p>
            <p>导入jira功能，导入后动态更新当前页面项目对应的jira列表，无需刷新</p>
          </template>
        </el-step>
      </el-steps>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
</style>
